<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../layui/font/iconfont.woff">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .storeimg {
            width: 50px;
            height: 50px;
        }

        /* #divPage {
            font-size: 18px;
            font-weight: 100;
            float: right;
            width: 15%;
            height: 10%;
        } */

        /* .aa {
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            background-color: white;
            border-radius: 3px;
            padding: 0 8px;
            cursor: pointer;
        } */

        #tubiaofont {
            height: 60px;
            background-color: rgb(240, 244, 246);
        }

        #tubiaofont span {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }

        #tanchukuang {
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
        }

        #popup_box {
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;

        }

        #popup_box>p {
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }

        #popup_box>div {
            width: 35%;
            margin: 0 auto;
            padding: 30px 0;
        }

        #popup_box>div>div {
            margin-bottom: 40px;
        }

        #popup_box>p>span {
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 70%;
            border-radius: 2px;
        }

        #tijiao1,
        #tijiao {
            margin-left: 43%;
            width: 6%;
            height: 38px;
        }

        .btnjg {
            text-align: center;
            padding: 10px 0 0 0;
        }

        #quxiao1,
        #quxiao {
            border: 1px solid black;
            box-sizing: border-box;
            width: 6%;
            height: 38px;
            background-color: white;
            color: black
        }


        #fanhui {
            cursor: pointer;
            float: right;
        }

        #fanhui1 {
            cursor: pointer;
            float: right;
        }

        .xx {
            width: 42%;
            float: right;
        }

        .modalAdd {
            width: 100%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(250, 244, 246);
            display: none;
            position: absolute;
        }


        #show {
            width: 100%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            position: absolute;
        }

        .modalUpdate {
            width: 100%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
            position: absolute;
        }

        #tabdiv {
            width: 100%;
            background-color: white;
            overflow: hidden;
        }

        #tabdiv>p {
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }

        #tabdiv>table {
            width: 100%;
            text-align: center;
        }

        #addbtn {
            margin: 1%;
        }

        th {
            text-align: center;
        }

        #text1 {
            width: 150px;
            height: 38px;
            line-height: 45px;
            margin: 3% 1% 3%;
            padding: 5px 0;
        }

        #text2 {
            height: 38px;
            width: 150px;
            padding: 5px 0;
            margin: 3% 1% 3% 0;
        }

        #text4 {
            height: 38px;
            width: 150px;
            padding: 5px 0;
            margin: 3% 1% 3% 0;
        }

        #queryMem {
            height: 36px;
            width: 60px;
        }

        .btna {
            text-align: center;
        }

        #popup_box>div {
            width: 90%;
            margin: 0 auto;
            border-bottom: 1px dashed black;
            margin-bottom: 2%;
        }

        #tubiaofont span:first-child {
            color: blue;
            font-size: 18px;
        }


        #tabdiv>p {
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }


        #search,
        #reset {
            font-size: 12px;
        }

        #tabdiv>table {
            width: 100%;
            text-align: center;
        }

        #addbtn {
            margin: 1%;
        }

        tr {
            border: 1px solid gainsboro;
            height: 50px;
        }


        #tanchukuang {
            width: 100%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
        }

        #popup_box {
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }

        #popup_box>p {
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            margin-bottom: 1.5%;
            background-color: rgb(236, 239, 241);
        }

        #popup_box>p>span {
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 70%;
            border-radius: 2px;
        }

        /* 修改区域 */
        #popup_box>div {
            width: 90%;
            margin: 0 auto;
            border-bottom: 1px dashed black;
            margin-bottom: 2%;
        }

        #popup_box>div>h3 {
            color: #1ab394;
            font-weight: 550;
            font-size: 17px;
        }

        #popup_box>div>div {
            width: 100%;
            margin: 2% 0;
            padding-left: 10%;
            box-sizing: border-box;
        }

        #popup_box>div>div>span {
            display: inline-block;
            width: 10%;
            text-align: right;
            margin-right: 2%;
        }

        #popup_box>div input,
        #popup_box>div select {
            display: inline-block;
            width: 20%;
            height: 38px;
            box-sizing: border-box;
            border: 1px solid black;
            padding-left: 10px;
        }

        #popup_box>div>div>span:nth-of-type(2) {
            margin-left: 20%;
        }

        #piLiangAndFenYe {
            margin: 10px 0;
            height: 50px;
            position: relative;
        }

        #divPage {
            padding: 5px 10px;
            margin-top: 2px;
            float: right;
        }

        #BtnAll {
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 2px;
            float: left;
        }

        #fenYe {
            height: 30px;
            position: absolute;
            right: 10px;
            border-style: none;
        }

        #fenYe>div {
            float: right;
        }

        #fenYe .fenyepag {
            width: 90px;
            height: 30px;
            line-height: 26px;
            margin: 7px 5px;
            border-style: none;
        }

        #divPage button {
            width: 40px;
            height: 30px;
            line-height: 26px;
            margin: 0 5px;
            border-style: none;
        }
        .cyan{
            background-color: rgb(0,150,136);
        }
    </style>
</head>

<body>
    <div id="show">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>品牌</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>品牌管理</span>
        </div>
        <div id="tabdiv">
            <!-- <button id="addbtn" class="layui-btn glyphicon glyphicon-plus">添加品牌</button> -->
            <p>商品列表 </p>
            <button id="addbtn" class="layui-btn">添加用户</button><!-- 按钮的样式 -->
            <div class="caption xx">
                <span> <input type="text" id="text1" placeholder=" 品牌名称" class="searchname"></span>
                <span> <input type="text" id="text2" placeholder=" 品牌类型"></span>
                <button class="layui-btn layui-btn-sm" id="queryMem">查询</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" class="All"></th>
                        <th>序号</th>
                        <th>品牌名称</th>
                        <th>品牌类型</th>
                        <th>官网地址</th>
                        <th>精选品牌</th>
                        <th>是否禁用</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userTable">
                </tbody>
            </table>
            <!-- <button id="BtnAll" class="layui-btn glyphicon ">批量删除</button> -->
            <!-- <div id="divPage">&lt;<span id="lr"></span>&gt;</div> -->
            <div id="piLiangAndFenYe" class="clear">
                <button id="BtnAll">批量删除</button>
                <div id="fenYe" class="clear">
                    <div>
                        <button id="pagUp" class="fenyepag">下一页</button>
                    </div>
                    <div id="divPage"></div><!-- 生成分页 -->
                    <div>
                        <button id="pagDow" class="fenyepag">上一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 修改 -->
    <div class="modalUpdate">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>品牌</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>品牌管理</span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>修改品牌</span>
        </div>
        <div id="popup_box">
            <p>修改品牌<span id="fanhui1">返回列表</span> </p>
            <div>
                <h3>修改品牌</h3>
                <div><span>&nbsp;&nbsp;&nbsp;序&nbsp;&nbsp;号&nbsp;&nbsp;:</span> <input type="text" class="id">
                    <span>品牌名称:</span> <input type="text" class="managementname">
                </div>
                <div> <span>品牌类型:</span> <input type="text" class="leixing">
                    <span>官网地址: </span><input type="text" class="guangwangip">
                </div>
                <div><span>精选品牌:</span> <input type="text" class="jingxuan">
                    <span>是否禁用: </span><input type="text" class="jinyong">
                </div>
            </div>
            <button id="tijiao1" class="layui-btn layui-btn-sm">提交</button>
            <button id="quxiao1" class="layui-btn layui-btn-sm">取消</button>
        </div>
    </div>
    <!-- Modal -->
    <div class="modalAdd">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>品牌</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>品牌管理</span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>增加品牌</span>
        </div>

        <div id="popup_box">
            <p>品牌添加<span id="fanhui">返回列表</span> </p>
            <div>
                <h3>添加品牌</h3>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;序&nbsp;&nbsp;号&nbsp;&nbsp;:</span><input type="text" name="" id="id">
                    <span>品牌名称:</span><input type="text" name="" id="managementname">
                </div>
                <div>
                    <span>官网地址:</span><input type="text" name="" id="guangwangip">
                    <span>品牌类型:</span>
                    <select name="leixing" id="leixing">
                        <option value="">所有类型</option>
                        <option value="饮料">饮料</option>
                        <option value="数码">数码</option>
                        <option value="HUAWEI">HUAWEI</option>
                        <option value="办公">办公</option>
                        <option value="电脑">电脑</option>
                        <option value="打印机">打印机</option>
                        <option value="三星">三星</option>
                        <option value="苹果">苹果</option>
                    </select>
                </div>
                <div>
                    <span>精选品牌:</span><input type="text" name="" id="jingxuan">
                    <span>是否禁用:</span><input type="text" name="" id="jinyong">
                </div>
            </div>
            <button id="tijiao" class="layui-btn layui-btn-sm">提交</button>
            <button id="quxiao" class="layui-btn layui-btn-sm">取消</button>
        </div>
    </div>
    <script src="../js/jQuery.3.6.0-uncompress.js"></script>
    <script src="../js/database.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/bootstrap.js"></script>
   <script src="../js/management.js"></script>
   <!-- <script src="../js/pagesize.js"></script> -->
</body>

</html>